var vertexShader = 
`attribute vec2 a_position;
void main()
{
    gl_Position = vec4(a_position, 0, 1);
}`;
var fragmentShader = 
`void main() {
    gl_FragColor = vec4(0, 1, 0, 1);  // green
  }
`;
function main()
{
    var canvas = document.getElementById("canvas");
    gl = canvas.getContext("experimental-webgl");
    if(!gl)
    {
        console.log("your browers not support webgl");
        return;
    } 

    program = gl.createProgram();
    var vs = createShaderByType(vertexShader, gl.VERTEX_SHADER);
    var fs = createShaderByType(fragmentShader, gl.FRAGMENT_SHADER);
    
    gl.attachShader(program, vs);
    gl.attachShader(program, fs);

    gl.linkProgram(program);
    gl.useProgram(program);

    drawScene();



}

function createShaderByType(shaderSource, shaderType)
{
    var shader = gl.createShader(shaderType);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) 
    {
        console.error(gl.getShaderInfoLog(fs));
    }
    return shader;
}

function drawScene()
{

    var positionLocation = gl.getAttribLocation(program, "a_position");
    var posBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
        // -0.5, -1.0,
        //  1.0, -1.0,
        // -0.5,  1.0,
        // -0.5,  1.0,
        //  1.0, -1.0,
        //  1.0,  1.0

        -0.6, -1.0,
         0.1, -1.0,
        -0.6,  1.0,
        -0.1,  1.0,
         0.6, -1.0,
         0.6,  1.0
          
        
        ]),
      gl.STATIC_DRAW);

    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
    var primitiveType = gl.TRIANGLES;
    var offset = 0;
    var count = 6;
    // var count = 3;

    gl.clearColor(0.25, 0.25, 0.25, 1);//设置clearColor
    gl.clear(gl.COLOR_BUFFER_BIT);     //clear
    gl.drawArrays(primitiveType, offset, count);
    console.log("draw end!");

}

main();


